<template>
  <el-form ref="queryForm" inline :model="queryModel">
    <template v-for="item in form" :key="item.model">
      <FormItem :item="item" v-bind="item" v-model="item.model" />
    </template>

    <el-form-item>
      <el-button type="primary" @click="handleQuery">查询</el-button>
      <el-button @click="handleReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import type { FormInstance } from 'element-plus/lib'
import FormItem from './FormItem.vue'
defineOptions({
  name: 'QueryForm'
})
defineProps({
  modelValue: {
    type: Object
  },
  form: {
    type: Object
  }
})
const emits = defineEmits(['handleQuery', 'update:modelValue'])
const queryForm = ref<FormInstance>()
const queryModel = reactive({

})

const handleReset = () => {
  queryForm.value?.resetFields()
}

const handleQuery = () => {
  emits('handleQuery', { ...queryModel })
}
</script>